<template>
  <div class="tabBar">
<div class="left" @click="itemClick('/main')">
  <van-icon name="wap-home-o"  size="30px"/>
  <div>首页</div>
  </div>
<div class="center" @click="itemClick('/news')">
  <van-icon name="notes-o"  size="30px"  />
   <div>资讯</div></div>
<div class="right" @click="itemClick('/mine')"> 
  <van-icon name="friends-o"  size="30px" />
  <div>更多</div></div>

  </div>
</template>

<script>

export default {
    methods: {
       itemClick(path){
          if(  path==this.$route.path)
          return
          else
          this.$router.push(path)
       }
    },
}

</script>
<style scoped>
  .tabBar {
    width: 99%;
    position:fixed;
    bottom: 0;
      display: flex;
     background-color: white;
     align-items: center;
    text-align: center;
   height: 80px;
   color: rgb(163,165,171);
   border: 1px solid;
  }
  .tabBar .center{
       flex: 1;
  }
  .tabBar .left{
      width: 150px;
  }
  .tabBar .right{
      width: 150px;
  }
</style>